<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="css/login.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/urlutils.js"></script>
    <script src="js/logout.js"></script>

    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>

    <script src="js/file.js"></script>
</head>

<body>

<!--弹窗1-->
        <dialog id="myDialog" class="myDialog">
            <div class="login-dialog">
                <h3>修改密码</h3>
                <div class="row">
                    <span>旧密码</span>
                    <input type="password" id="password1">
                </div>
                <div id="warn1" class="warn"></div>
                <div class="row">
                    <span>新密码</span>
                    <input type="password" id="password2" >
                </div>
                <div id="warn2" class="warn"></div>

                <div class="row">
                    <span>确认密码</span>
                    <input type="password" id="password3" >
                </div>
                <div id="warn3" class="warn"></div>
                <div class="row1">
                    <button onclick="changePassword()">提交</button>
                    <button  onclick="hideDialog('myDialog')">取消</button>
                </div>
            </div>
        </dialog>
<!--弹窗2-->
        <dialog id="myDialog2" class="myDialog">
            <div class="login-dialog">
                <h2>头像</h2>
                <img src="" class="avtar" alt="" id="photo1" >

                <h4 id ="art"></h4>
                <div class="row1">

                <button>

                    <label>选择头像<input type="file" id="file" name="multipartfile" class="files" accept="image/gif, image/jpeg, image/png, image/jpg" ></label>

                </button>
                <button onclick="save()">确认/取消修改</button>
                </div>
            </div>
        </dialog>
<!--弹窗三-->
    <dialog id="myDialog3" class="myDialog">
        <div class="login-dialog">
            <h3>个人信息</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div id="warn4" class="warn"></div>
            <div class="row">
                <span>github 地址</span>
                <input type="text" id="git">
            </div>
            <div id="warn5" class="warn"></div>
            <div class="row1">
                <button onclick="upInfo()">提交</button>
                <button  onclick="hideDialog('myDialog3')">取消</button>
            </div>

        </div>
    </dialog>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/log.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list2.html">主页</a>
        <a href="blog_add.html" >写博客</a>
        <div class="items">
            <div class="menu">
                <span>个人设置</span>
                <div class="menuId">
                    <button  class="show" onclick="showDialog('myDialog')">修改密码</button>
                    <br>
                    <button  class="show" onclick="showDialog('myDialog3')">修改个人信息</button>
                    <br>
                    <a href="javascript:logout()" class="drop">退出</a>
                </div>
            </div>
        </div>
    </div>


    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src=""  alt="" id="photo" onclick="showDialog('myDialog2')" >
                <!--                  名字-->
                <h3 id="article"></h3>
                <a href="*" id="git1">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                </div>
                <div class="counter">
                    <span id="num"></span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <div id="createDiv">

            </div>
            <hr>

        </div>


    </div>

        <script>

                $(document).ready(function() {
                $.ajax({
                    url: '/api/log',
                    type: 'post',
                    success: function(res) {
                        if(res.code==200){
                            $('#photo').attr('src', res.data); //弹窗头像
                            $('#photo1').attr('src', res.data);
                        }else{
                            $('#photo').attr('src',"./img/logo2.jpg");
                            $('#photo1').attr('src', "./img/logo2.jpg");
                        }
                    }
                });
            });


            //打开弹框
            function showDialog(myDialog) {
                var dialog = document.getElementById(myDialog);
                dialog.show();
            }
            // 关闭弹框
            function hideDialog(myDialog) {
                var dialog = document.getElementById(myDialog);
                dialog.close();
            }

            function upInfo(){
                var useName=jQuery("#username").val();
                var git=jQuery("#git").val();
                if(useName==null || useName==""){
                    $('#warn4').html("*请输入用户名");
                    return;
                }else{
                    $("#warn4").html("")
                }
                if(git==null || git==""){
                    $('#warn5').html("*请输入git地址");
                    return;
                }else {
                    $("#warn5").html("")
                }
                $.post("userinfo/upInfo", {
                    "uName": useName,
                    "url": git
                    },function (res){
                        if(res.code==200 && res.data!=null){
                            alert("修改成功");
                            window.location.href=window.location.href;
                        }else{
                            alert("失败:"+res.msg);
                        }
                })
            }
             // 修改密码
            function changePassword(){
                var password1=jQuery("#password1").val();
                var password2=jQuery("#password2").val();
                var password3=jQuery("#password3").val();
                if(password1==null || password1==""){
                    $('#warn1').html("*请输入旧密码");
                    return;
                }else{
                    $("#warn1").html("")
                }
                if(password2==null || password2==""){
                    $('#warn2').html("*请输入新密码");
                    return;
                }else {
                    $("#warn2").html("")
                }
                if(password3==null || password3==""){
                    $("#warn3").html("*不为空");
                    return;
                }
                if(password3 != password2){
                    $("#warn2").html("*二次密码不相同")
                    $("#warn3").html("*二次密码不相同")
                    return;
                }else{
                    $("#warn2").html("")
                    $("#warn3").html("")
                }
                $.post("userinfo/changePassword",{
                    "password1":password1,
                    "password2":password2,
                    "password3":password3
                },function (res){
                    if(res.code==200 && res.data!=null){
                        hideDialog('myDialog');
                        alert("修改成功")
                    }else if(res.code !=-1){
                        $("#warn1").html("旧密码错误！！！");
                    }else{
                        alert("失败:"+res.msg);
                    }
                })
            }

            // 获取文章列表
            $.post("/articleinfo/getMylist",{},function (res){
                if(res.code==200 && res.data!=null){
                    var createHtml="";
                    var artlist=res.data.art;
                    var user=res.data.user;
                    if(user!=null){
                        jQuery("#article").html(user.uname);
                        jQuery("#art").html(user.uname);
                        jQuery("#num").html(user.count);
                        document.getElementById('git1').setAttribute('href',user.url);
                    }else{
                        alert("抱歉：查询失败！"+res.msg);
                        window.location.href="blog_list.html";
                    }
                    if(artlist!=null && artlist.length!=0 ){
                        for(var i=0;i<artlist.length;i++) {
                            var art=artlist[i];
                            createHtml+='<div class="blog">';
                            createHtml+='<div class="title">'+art.title+'</div>';
                            createHtml+='<div class="date">';
                            createHtml+='<span>'+art.createtime+'</span>';
                            createHtml+='&nbsp;&nbsp;&nbsp;&nbsp;';
                            createHtml+='<span>阅读量：'+art.rcount+'</span>';
                            createHtml+='</div>';
                            createHtml+='<div class="desc">'+art.synopsis+'</div>';
                            createHtml+='<div class="san">';
                            createHtml+='<a href=blog_content.html?id='+art.aid+' class="detail">查看全文>></a>';
                            createHtml+='<a href=blog_edit.html?id='+art.aid+' class="detail">修改>></a>';
                            createHtml+='<a href=javascript:del('+art.aid+') class="detail">删除>></a>';
                            createHtml+='</div></div>';
                        }
                    }else{
                        createHtml+="<h3>未有文章，请期待</h3>";
                    }
                    jQuery("#createDiv").html(createHtml);
                }else{
                    alert("抱歉，操作失败"+res.msg);
                    location.href="login.html"
                }
            })

            //删除指定文章
            function del(aid){
                if(aid<=0 ||aid==""){
                    alert("参数错误！")
                    return false;
                }
                $.get("/articleinfo/delete",{
                    "aid":aid
                },function (res){
                    if(res.code==200 && res.data==1){
                        alert("删除成功");
                        location.href=location.href;
                    }else{
                        alert("删除失败"+res.msg);
                    }
                })
            }

            var filename;
            // 更换图片
            let fileInput = document.getElementById('file');
            let preview = document.getElementById('photo1');
            // 监听change事件:
            fileInput.addEventListener('change', function() {
                // 清除背景图片:
                preview.style.backgroundImage = '';
                if (!fileInput.value) {
                    info.innerHTML = '没有选择文件';
                    return;
                }
                let file = fileInput.files[0];
                // let size = file.size;
                // if (size >= 1 * 1024 * 1024) {
                //     alert('文件大小超出限制');
                //     info.innerHTML = '文件大小超出限制';
                //     return false;
                // }
                // 获取File信息:
                //info.innerHTML = `文件名称:  + ${file.name}<br>文件大小: ${file.size} <br>上传时间: ${file.lastModifiedDate}`;
               filename=file.name;
                if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
                    alert('不是有效的图片文件!');
                    return;
                }
                // 读取文件:
                let reader = new FileReader();
                reader.onload = function(e) {
                    let data = e.target.result;
                    preview.src = data
                };
                // 以DataURL的形式读取文件:
                reader.readAsDataURL(file);

            });

            function save() {
                var formData = new FormData();
                formData.append('file', fileInput.files[0]);

                    var dialog = document.getElementById('myDialog2');

                $.ajax({
                    url: 'api/upload', // 目标后端接口的URL
                    type: 'POST', // 请求类型为POST
                    data: formData, // 将FormData对象作为请求主体发送
                    contentType: false, // 禁止自动转换内容类型为application/x-www-form-urlencoded
                    processData: false, // 禁止自动处理数据为查询字符串
                    success: function(response) {
                        // 处理响应数据
                        console.log('文件上传成功');
                        dialog.close();
                        location.reload();
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // 处理错误信息
                        console.log('文件上传失败');
                        dialog.close();
                    }
                });



            }





        </script>



</body>

</html>